<template>
  <div class="patient-detail-container">
    <!-- 页面标题栏 -->
    <div class="page-header">
      <h1 class="page-title">患者详情</h1>
      <el-button 
        type="primary" 
        plain 
        icon="el-icon-arrow-left" 
        class="back-button"
        @click="handleBack"
      >
        返回
      </el-button>
    </div>

    <!-- 主内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧患者信息卡片 -->
      <div class="left-panel">
        <!-- 患者基本信息卡片 -->
        <el-card class="patient-info-card" shadow="hover">
          <div class="patient-header">
            <div class="patient-avatar">
              <el-avatar :size="64" :icon="getGenderIcon(patientInfo.gender)" class="avatar"></el-avatar>
            </div>
            <div class="patient-basic-info">
              <h2 class="patient-name">{{ patientInfo.name }}</h2>
              <div class="patient-meta">
                <span class="meta-item">{{ patientInfo.gender }} {{ patientInfo.age }}岁</span>
                <span class="meta-item">联系电话: {{ patientInfo.phone }}</span>
                <span class="meta-item">签约日期: {{ patientInfo.signDate }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 健康状况卡片 -->
        <el-card class="health-status-card" shadow="hover">
          <h3 class="card-title">健康状况</h3>
          <div class="health-info-grid">
            <div class="health-item">
              <span class="health-label">身高:</span>
              <span class="health-value">{{ patientInfo.height }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">体重:</span>
              <span class="health-value">{{ patientInfo.weight }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">BMI:</span>
              <span class="health-value" :class="getBMILevelClass(patientInfo.bmi)">{{ patientInfo.bmi }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">腰围:</span>
              <span class="health-value">{{ patientInfo.waistCircumference }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">是否吸烟:</span>
              <span class="health-value">{{ patientInfo.isSmoking ? '是' : '否' }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">是否饮酒:</span>
              <span class="health-value">{{ patientInfo.isDrinking ? '是' : '否' }}</span>
            </div>
            <div class="health-item">
              <span class="health-label">是否运动:</span>
              <span class="health-value">{{ patientInfo.isExercising ? '是' : '否' }}</span>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧详细信息区域 -->
      <div class="right-panel">
        <!-- 标签页 -->
        <el-tabs v-model="activeTab" type="border-card" class="detail-tabs">
          <!-- 基础信息标签页 -->
          <el-tab-pane label="基础信息" name="basic">
            <el-form :model="patientInfo" class="detail-form">
              <!-- 基本信息 -->
              <div class="form-section">
                <h3 class="section-title">基本信息</h3>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="姓名">
                      <span class="form-value">{{ patientInfo.name }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别">
                      <span class="form-value">{{ patientInfo.gender }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证号">
                      <span class="form-value">{{ patientInfo.idCard }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出生日期">
                      <span class="form-value">{{ patientInfo.birthDate }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话">
                      <span class="form-value">{{ patientInfo.phone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="婚姻状况">
                      <span class="form-value">{{ patientInfo.maritalStatus }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="国籍">
                      <span class="form-value">{{ patientInfo.nationality }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民族">
                      <span class="form-value">{{ patientInfo.ethnicity }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="文化程度">
                      <span class="form-value">{{ patientInfo.education }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职业">
                      <span class="form-value">{{ patientInfo.occupation }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="血型">
                      <span class="form-value">{{ patientInfo.bloodType }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="参保情况">
                      <span class="form-value">{{ patientInfo.insurance }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <!-- 家庭情况 -->
              <div class="form-section">
                <h3 class="section-title">家庭情况</h3>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="居住面积">
                      <span class="form-value">{{ patientInfo.livingArea }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="家庭人数">
                      <span class="form-value">{{ patientInfo.familySize }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="居住情况">
                      <span class="form-value">{{ patientInfo.livingCondition }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <!-- 既往病史 -->
              <div class="form-section">
                <h3 class="section-title">既往病史</h3>
                <div class="history-content">
                  <!-- 可动态添加的病史内容 -->
                  <div v-if="patientInfo.pastHistory.length === 0" class="empty-history">
                    <p>暂无既往病史记录</p>
                  </div>
                  <div v-else v-for="(history, index) in patientInfo.pastHistory" :key="index" class="history-item">
                    <el-form-item label="疾病名称">
                      <span class="form-value">{{ history.diseaseName }}</span>
                    </el-form-item>
                    <el-form-item label="诊断时间">
                      <span class="form-value">{{ history.diagnosisTime }}</span>
                    </el-form-item>
                    <el-form-item label="治疗情况">
                      <span class="form-value">{{ history.treatmentStatus }}</span>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <!-- 家族史 -->
              <div class="form-section">
                <h3 class="section-title">家族史</h3>
                <div class="family-history-content">
                  <div v-if="patientInfo.familyHistory.length === 0" class="empty-history">
                    <p>暂无家族史记录</p>
                  </div>
                  <div v-else v-for="(history, index) in patientInfo.familyHistory" :key="index" class="history-item">
                    <el-form-item label="疾病名称">
                      <span class="form-value">{{ history.diseaseName }}</span>
                    </el-form-item>
                    <el-form-item label="关系">
                      <span class="form-value">{{ history.relationship }}</span>
                    </el-form-item>
                  </div>
                </div>
              </div>

              <!-- 过敏史 -->
              <div class="form-section">
                <h3 class="section-title">过敏史</h3>
                <div class="allergy-content">
                  <div v-if="patientInfo.allergyHistory.length === 0" class="empty-history">
                    <p>暂无过敏史记录</p>
                  </div>
                  <div v-else v-for="(allergy, index) in patientInfo.allergyHistory" :key="index" class="allergy-item">
                    <el-form-item label="过敏原">
                      <span class="form-value">{{ allergy.allergen }}</span>
                    </el-form-item>
                    <el-form-item label="过敏反应">
                      <span class="form-value">{{ allergy.reaction }}</span>
                    </el-form-item>
                  </div>
                </div>
              </div>

              <!-- 签约情况 -->
              <div class="form-section">
                <h3 class="section-title">签约情况</h3>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="签约日期">
                      <span class="form-value">{{ patientInfo.signDate }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签约状态">
                      <el-tag :type="patientInfo.signStatus === '已签约' ? 'success' : 'info'" effect="dark">
                        {{ patientInfo.signStatus }}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签约医生">
                      <span class="form-value">{{ patientInfo.contractingDoctor }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="到期日期">
                      <span class="form-value">{{ patientInfo.expireDate }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-tab-pane>

          <!-- 就诊记录标签页 -->
          <el-tab-pane label="就诊记录" name="records">
            <div class="medical-records">
              <div v-if="patientInfo.medicalRecords.length === 0" class="empty-records">
                <el-empty description="暂无就诊记录" class="empty-state"></el-empty>
              </div>
              <el-timeline v-else class="timeline-container">
                <el-timeline-item
                  v-for="(record, index) in patientInfo.medicalRecords"
                  :key="index"
                  :timestamp="record.visitDate"
                  type="primary"
                  :icon="'el-icon-medal-1'"
                >
                  <el-card class="record-card" shadow="hover">
                    <div class="record-header">
                      <h4 class="record-title">{{ record.department }} - {{ record.doctorName }}</h4>
                      <span class="record-time">{{ record.visitTime }}</span>
                    </div>
                    <div class="record-content">
                      <div class="record-section">
                        <h5 class="record-subtitle">主诉</h5>
                        <p class="record-text">{{ record.chiefComplaint }}</p>
                      </div>
                      <div class="record-section">
                        <h5 class="record-subtitle">现病史</h5>
                        <p class="record-text">{{ record.presentIllness }}</p>
                      </div>
                      <div class="record-section">
                        <h5 class="record-subtitle">诊断结果</h5>
                        <p class="record-text">{{ record.diagnosis }}</p>
                      </div>
                      <div class="record-section">
                        <h5 class="record-subtitle">治疗方案</h5>
                        <p class="record-text">{{ record.treatmentPlan }}</p>
                      </div>
                    </div>
                    <div class="record-footer">
                      <el-button size="small" type="primary" plain>查看详情</el-button>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>

          <!-- 随访记录标签页 -->
          <el-tab-pane label="随访记录" name="followups">
            <div class="followup-records">
              <div v-if="patientInfo.followupRecords.length === 0" class="empty-records">
                <el-empty description="暂无随访记录" class="empty-state"></el-empty>
              </div>
              <el-timeline v-else class="timeline-container">
                <el-timeline-item
                  v-for="(followup, index) in patientInfo.followupRecords"
                  :key="index"
                  :timestamp="followup.followupDate"
                  type="success"
                  :icon="'el-icon-chat-line-round'"
                >
                  <el-card class="followup-card" shadow="hover">
                    <div class="followup-header">
                      <h4 class="followup-title">{{ followup.followupType }} - {{ followup.followupBy }}</h4>
                      <span class="followup-status">{{ followup.status }}</span>
                    </div>
                    <div class="followup-content">
                      <div class="followup-section">
                        <h5 class="followup-subtitle">随访方式</h5>
                        <p class="followup-text">{{ followup.method }}</p>
                      </div>
                      <div class="followup-section">
                        <h5 class="followup-subtitle">主要问题</h5>
                        <p class="followup-text">{{ followup.mainIssues }}</p>
                      </div>
                      <div class="followup-section">
                        <h5 class="followup-subtitle">处理意见</h5>
                        <p class="followup-text">{{ followup.recommendations }}</p>
                      </div>
                    </div>
                    <div class="followup-footer">
                      <el-button size="small" type="success" plain>查看详情</el-button>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>

          <!-- 健康档案标签页 -->
          <el-tab-pane label="健康档案" name="health">
            <div class="health-records">
              <el-card class="health-card" shadow="hover" v-for="(record, index) in patientInfo.healthRecords" :key="index">
                <div class="health-record-header">
                  <h4 class="health-record-title">{{ record.recordType }}</h4>
                  <span class="health-record-date">{{ record.recordDate }}</span>
                </div>
                <div class="health-record-content">
                  <el-table :data="record.details" border style="width: 100%">
                    <el-table-column prop="item" label="检查项目" width="180"></el-table-column>
                    <el-table-column prop="result" label="检查结果" width="180"></el-table-column>
                    <el-table-column prop="unit" label="单位" width="80"></el-table-column>
                    <el-table-column prop="reference" label="参考范围" width="180"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                      <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)" size="small">
                          {{ scope.row.status }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="health-record-footer">
                  <el-button size="small" type="info" plain>查看完整报告</el-button>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 激活的标签页
const activeTab = ref('basic')

// 患者详细信息数据
const patientInfo = reactive({
  // 基础信息
  name: '赵森',
  gender: '男',
  age: 21,
  idCard: '455698877451236547',
  birthDate: '2003年6月15日',
  phone: '13261530615',
  maritalStatus: '未婚',
  nationality: '中国',
  ethnicity: '汉族',
  education: '本科',
  occupation: 'IT',
  bloodType: 'AB型',
  insurance: '城镇职工基本医疗保险',
  
  // 健康指标
  height: '180CM',
  weight: '80KG',
  bmi: 21.7,
  waistCircumference: '85CM',
  isSmoking: false,
  isDrinking: false,
  isExercising: false,
  
  // 家庭情况
  livingArea: '<50㎡',
  familySize: '5人',
  livingCondition: '家人同住',
  
  // 签约情况
  signDate: '2023-03-12',
  signStatus: '已签约',
  contractingDoctor: '张医生',
  expireDate: '2025-10-22',
  
  // 病史记录
  pastHistory: [],
  familyHistory: [],
  allergyHistory: [],
  
  // 就诊记录
  medicalRecords: [
    {
      visitDate: '2024-01-15',
      visitTime: '上午10:30',
      department: '内科',
      doctorName: '李医生',
      chiefComplaint: '头痛3天，伴有轻微恶心',
      presentIllness: '患者3天前无明显诱因出现头痛，主要位于额部，呈胀痛，偶有恶心，无呕吐，无发热',
      diagnosis: '偏头痛',
      treatmentPlan: '1. 休息，避免劳累 2. 口服布洛芬缓释胶囊 3. 必要时神经内科就诊'
    },
    {
      visitDate: '2023-11-20',
      visitTime: '下午2:00',
      department: '全科',
      doctorName: '王医生',
      chiefComplaint: '常规体检',
      presentIllness: '患者近期无不适，要求进行年度体检',
      diagnosis: '健康体检',
      treatmentPlan: '1. 建议增加运动 2. 控制饮食 3. 定期复查'
    }
  ],
  
  // 随访记录
  followupRecords: [
    {
      followupDate: '2024-02-10',
      followupType: '常规随访',
      followupBy: '张护士',
      status: '已完成',
      method: '电话随访',
      mainIssues: '患者表示头痛症状已缓解，目前无不适',
      recommendations: '继续保持健康生活方式，如有不适及时就诊'
    }
  ],
  
  // 健康档案
  healthRecords: [
    {
      recordType: '血常规检查',
      recordDate: '2023-11-20',
      details: [
        { item: '红细胞计数', result: '4.8', unit: '×10^12/L', reference: '4.3-5.8', status: '正常' },
        { item: '血红蛋白', result: '145', unit: 'g/L', reference: '130-175', status: '正常' },
        { item: '白细胞计数', result: '6.5', unit: '×10^9/L', reference: '3.5-9.5', status: '正常' },
        { item: '血小板计数', result: '220', unit: '×10^9/L', reference: '125-350', status: '正常' }
      ]
    },
    {
      recordType: '生化检查',
      recordDate: '2023-11-20',
      details: [
        { item: '血糖', result: '5.2', unit: 'mmol/L', reference: '3.9-6.1', status: '正常' },
        { item: '总胆固醇', result: '4.8', unit: 'mmol/L', reference: '<5.2', status: '正常' },
        { item: '甘油三酯', result: '1.6', unit: 'mmol/L', reference: '<1.7', status: '正常' },
        { item: '尿酸', result: '420', unit: 'μmol/L', reference: '208-428', status: '正常' }
      ]
    }
  ]
})

// 根据性别获取图标
const getGenderIcon = (gender: string) => {
  return gender === '男' ? 'el-icon-user-solid' : 'el-icon-user'
}

// 根据BMI值获取级别样式
const getBMILevelClass = (bmi: number) => {
  if (bmi < 18.5) return 'bmi-underweight'
  if (bmi < 24) return 'bmi-normal'
  if (bmi < 28) return 'bmi-overweight'
  return 'bmi-obese'
}

// 根据检查结果状态获取类型
const getStatusType = (status: string) => {
  switch (status) {
    case '正常': return 'success'
    case '偏高': return 'warning'
    case '偏低': return 'warning'
    case '异常': return 'danger'
    default: return 'info'
  }
}

// 返回上一页
const handleBack = () => {
  router.back()
}
</script>

<style scoped>
/* 页面整体容器 */
.patient-detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

/* 页面标题栏 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.back-button {
  transition: all 0.3s ease;
}

.back-button:hover {
  transform: translateX(-3px);
}

/* 内容布局 */
.content-wrapper {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

/* 左侧面板 */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 患者信息卡片 */
.patient-info-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.patient-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.patient-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.patient-avatar .avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-size: 28px;
}

.patient-basic-info {
  flex: 1;
}

.patient-name {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.patient-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-item {
  font-size: 14px;
  color: #6b7280;
}

/* 健康状况卡片 */
.health-status-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.health-status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
}

.health-info-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.health-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.health-item:hover {
  background-color: #f3f4f6;
}

.health-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.health-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* BMI级别样式 */
.bmi-normal { color: #10b981; }
.bmi-underweight { color: #3b82f6; }
.bmi-overweight { color: #f59e0b; }
.bmi-obese { color: #ef4444; }

/* 右侧面板 */
.right-panel {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 标签页样式 */
.detail-tabs {
  border-radius: 12px;
  overflow: hidden;
}

.detail-tabs .el-tabs__header {
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 0 20px;
}

.detail-tabs .el-tabs__nav-wrap::after {
  height: 0;
}

.detail-tabs .el-tabs__item {
  padding: 16px 24px;
  margin: 0 8px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.detail-tabs .el-tabs__item.is-active {
  color: #165dff;
  border-bottom-color: #165dff;
  font-weight: 600;
}

/* 表单样式 */
.detail-form {
  padding: 24px;
}

.form-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 24px;
  background-color: #165dff;
  margin-right: 12px;
  border-radius: 2px;
}

.el-form-item__label {
  font-weight: 500;
  color: #374151;
}

.form-value {
  font-size: 14px;
  color: #6b7280;
  padding: 4px 8px;
  background-color: #f9fafb;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* 病史内容样式 */
.history-content,
.family-history-content,
.allergy-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item,
.allergy-item {
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  border-left: 4px solid #165dff;
}

.empty-history,
.empty-records {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
}

/* 就诊记录样式 */
.medical-records,
.followup-records {
  padding: 20px;
}

.timeline-container {
  padding-left: 0;
}

.record-card,
.followup-card {
  margin-top: 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.record-card:hover,
.followup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.record-header,
.followup-header,
.health-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.record-title,
.followup-title,
.health-record-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.record-time,
.followup-status,
.health-record-date {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.record-content,
.followup-content,
.health-record-content {
  margin-bottom: 16px;
}

.record-section,
.followup-section {
  margin-bottom: 16px;
}

.record-section:last-child,
.followup-section:last-child {
  margin-bottom: 0;
}

.record-subtitle,
.followup-subtitle {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.record-text,
.followup-text {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.record-footer,
.followup-footer,
.health-record-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* 健康档案样式 */
.health-records {
  padding: 20px;
}

.health-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.health-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.health-card:last-child {
  margin-bottom: 0;
}

.empty-state {
  padding: 60px 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .left-panel {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .patient-info-card,
  .health-status-card {
    flex: 1;
    min-width: 300px;
  }
}

@media (max-width: 768px) {
  .patient-detail-container {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .left-panel {
    flex-direction: column;
  }
  
  .patient-info-card,
  .health-status-card {
    min-width: auto;
  }
  
  .patient-header {
    flex-direction: column;
    text-align: center;
  }
  
  .detail-tabs .el-tabs__header {
    padding: 0 12px;
  }
  
  .detail-tabs .el-tabs__item {
    padding: 12px 16px;
    margin: 0 4px;
    font-size: 14px;
  }
  
  .detail-form {
    padding: 16px;
  }
  
  .medical-records,
  .followup-records,
  .health-records {
    padding: 16px;
  }
}
</style>